<template>
  <el-dialog
    title="设置时间"  
    v-dialogDrag 
    :visible.sync="dialogVisible"
    width="700px"
    :close-on-click-modal="false"
  >
    <div class="dialog-content">
      <el-form 
        ref="timeForm" 
        :model="timeTableCellForm" 
        label-width="100px" 
        size="medium"
        class="time-form"
        label-position="left"
      >
        <el-form-item class="no-time-change">
          <el-checkbox 
            v-model="timeTableCellForm.sign" 
            :true-label="3" 
            :false-label="0"
            class="custom-checkbox"
            @change="handleTimeChangeToggle"
          >
            <span class="checkbox-label">时间不变</span>
          </el-checkbox>
        </el-form-item>
        
        <!-- 时间配置区域 -->
        <div v-if="timeTableCellForm.sign == 3" class="time-config">
          <el-form-item label="模式" class="mode-selection">
            <el-radio-group v-model="timeTableCellForm.dtModeID" class="mode-radio-group">
              <el-radio :label="3" class="mode-radio">时间段</el-radio>
              <el-radio :label="4" class="mode-radio">截止时间</el-radio>
            </el-radio-group>
          </el-form-item>
          
          <el-form-item label="时间" class="time-selection">
            <div v-if="timeTableCellForm.dtModeID == 4" class="time-type deadline">
              <div class="time-picker-container">
                <el-date-picker
                  v-model="timeTableCellForm.DT1"
                  type="date"
                  format="yyyy年MM月dd日"
                  value-format="yyyy/MM/dd"
                  placeholder="选择日期"
                  class="date-picker"
                  :popper-class="'time-picker-popper'"
                >
                </el-date-picker>
              </div>
            </div>
            
            <div v-if="timeTableCellForm.dtModeID == 3" class="time-type range">
              <div class="time-picker-container">
                <el-date-picker
                  v-model="timeTableCellForm.DT1"
                  type="date"
                  format="yyyy年MM月dd日"
                  value-format="yyyy/MM/dd"
                  placeholder="选择开始日期"
                  class="date-picker"
                  :popper-class="'time-picker-popper'"
                >
                </el-date-picker>
              </div>
              <span class="separator">至</span>
              <div class="time-picker-container">
                <el-date-picker
                  v-model="timeTableCellForm.DT2"
                  type="date"
                  format="yyyy年MM月dd日"
                  value-format="yyyy/MM/dd"
                  placeholder="选择结束日期"
                  class="date-picker"
                  :popper-class="'time-picker-popper'"
                >
                </el-date-picker>
              </div>
            </div>
            <div class="date-quick-settings" v-if="timeTableCellForm.dtModeID == 3 || timeTableCellForm.dtModeID == 4">
                <span class="quick-label">快捷日期：</span>
                <div class="date-quick-buttons">
                    <el-button 
                    size="mini" 
                    @click="setQuickDate('today')"
                    class="quick-date-btn"
                    >
                    今天
                    </el-button>
                    <el-button 
                    size="mini" 
                    @click="setQuickDate('yesterday')"
                    class="quick-date-btn"
                    >
                    昨天
                    </el-button>
                    <el-button 
                    size="mini" 
                    @click="setQuickDate('week')"
                    class="quick-date-btn"
                    >
                    本周
                    </el-button>
                    <el-button 
                    size="mini" 
                    @click="setQuickDate('month')"
                    class="quick-date-btn"
                    >
                    本月
                    </el-button>
                </div>
            </div>
          </el-form-item>
          
        </div>
        
        <div v-else class="no-time-selected">
          <div class="empty-state">
            <div class="empty-icon">
              <i class="el-icon-time"></i>
            </div>
            <h3 class="empty-title">时间设置已关闭</h3>
            <p class="empty-description">
              当前选择不设置特定时间，系统将保持原有时间不变。<br>
              如需设置具体时间或时间段，请勾选上方的<span class="blueText" style="font-weight: bold;">  时间不变  </span>选项。
            </p>
          </div>
        </div>
      </el-form>  
    </div>
    
    <div class="dialog-footer">
        <el-button @click="handleCancel" class="cancel-btn" round icon="el-icon-close" size="small">取消</el-button>
        <el-button type="primary" @click="handleSaveTimeCellDialog" class="confirm-btn" round icon="el-icon-check" size="small">确认配置</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'TimeSetDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    timeTableCellForm: {
      type: Object,
      default: () => ({
        sign: 0,
        dtModeID: 3,
        DT1: '',
        DT2: ''
      })
    }
  },
  data(){
    return{
      dialogVisible: this.visible,
    }
  },
  watch: {
    visible(newVal) {
        this.dialogVisible = newVal
    },
    dialogVisible(newVal) {
        this.$emit('update:visible', newVal)
    },
  },
  methods: {
    handleTimeChangeToggle(checked) {
      if (checked) {
        // 重置时间选择
        this.timeTableCellForm.DT1 = '';
        this.timeTableCellForm.DT2 = '';
      }
    },

    setQuickDate(type) {
      const today = new Date();
      const yesterday = new Date(today);
      yesterday.setDate(yesterday.getDate() - 1);
      
      const startOfWeek = new Date(today);
      startOfWeek.setDate(today.getDate() - today.getDay());
      
      const startOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
      
      const formatDate = (date) => {
        return `${date.getFullYear()}/${String(date.getMonth() + 1).padStart(2, '0')}/${String(date.getDate()).padStart(2, '0')}`;
      };

      switch (type) {
        case 'today':
          this.timeTableCellForm.DT1 = formatDate(today);
          this.timeTableCellForm.DT2 = ''
          this.timeTableCellForm.dtModeID = 4
          break;
        case 'yesterday':
          this.timeTableCellForm.DT1 = formatDate(yesterday);
          this.timeTableCellForm.DT2 = ''
          this.timeTableCellForm.dtModeID = 4
          break;
        case 'week':
          this.timeTableCellForm.DT1 = formatDate(startOfWeek);
          this.timeTableCellForm.DT2 = formatDate(today);
          this.timeTableCellForm.dtModeID = 3;
          break;
        case 'month':
          this.timeTableCellForm.DT1 = formatDate(startOfMonth);
          this.timeTableCellForm.DT2 = formatDate(today);
          this.timeTableCellForm.dtModeID = 3;
          break;
      }
    },
    
    handleSaveTimeCellDialog() {
      if (this.timeTableCellForm.sign === 3) {
        if (!this.timeTableCellForm.DT1) {
          this.$message.warning('请选择日期');
          return;
        }
        
        if (this.timeTableCellForm.dtModeID === 3 && !this.timeTableCellForm.DT2) {
          this.$message.warning('请选择结束日期');
          return;
        }
        
        if (this.timeTableCellForm.dtModeID === 3 && 
            new Date(this.timeTableCellForm.DT1) > new Date(this.timeTableCellForm.DT2)) {
          this.$message.warning('开始日期不能晚于结束日期');
          return;
        }
      }
      
      this.$emit('confirm', this.timeTableCellForm);
    },
    
    handleCancel() {
      this.$emit('cancel');
    }
  }
}
</script>

<style scoped lang="scss">
.dialog-content {
  padding: 10px 0;
  min-height: 220px;
}

.time-form ::v-deep .el-form-item {
  margin-bottom: 20px;
  padding: 12px 0;
}

.time-form ::v-deep .el-form-item__label {
  font-weight: 600;
  color: #555;
  padding-right: 20px;
}

.no-time-change {
  border-bottom: 1px dashed #eaeaea;
  padding-bottom: 20px !important;
  margin-bottom: 25px !important;
}

.custom-checkbox ::v-deep .el-checkbox__label {
  font-weight: 600;
  color: #409EFF;
  font-size: 15px;
}

/* 时间配置区域 */
.time-config {
  padding: 20px;
  background-color: #f9fafc;
  border-radius: 8px;
  border-left: 4px solid #409EFF;
  margin-top: 10px;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.mode-selection {
  margin-bottom: 15px !important;
}

.mode-radio-group {
  width: 100%;
}

.mode-radio {
  margin-right: 30px;
  padding: 8px 16px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  transition: all 0.3s;
}

.mode-radio:hover {
  border-color: #409EFF;
}

.mode-radio ::v-deep.is-checked {
  border-color: #409EFF;
  background-color: #ecf5ff;
}

.time-selection ::v-deep .el-form-item__content {
  line-height: normal;
}

.time-type {
  display: flex;
  flex-direction: row;
  gap: 15px;
}


.picker-label {
  width: 70px;
  color: #606266;
  font-size: 14px;
  font-weight: 500;
}

.date-picker {
  width: 200px;
}

.time-set-dialog ::v-deep .el-date-editor.el-input {
  width: 100%;
}

.separator {
  padding: 0 15px;
  color: #909399;
  font-weight: 500;
  line-height: 35px;
}

.no-time-selected {
  padding: 30px 20px;
  text-align: center;
  animation: fadeIn 0.5s ease;
}

.empty-state {
  max-width: 400px;
  margin: 0 auto;
}

.empty-icon {
  font-size: 60px;
  color: #c0c4cc;
  margin-bottom: 20px;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.time-picker-popper {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.time-picker-popper ::v-deep .el-picker-panel__body {
  border: none;
}

.time-picker-popper ::v-deep .el-date-table td.current:not(.disabled) span {
  background-color: #667eea;
  color: white;
}

.time-picker-popper ::v-deep .el-date-table td.today span {
  color: #667eea;
}

.date-quick-settings {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    
    .quick-label {
        font-size: 14px;
        color: #606266;
        white-space: nowrap;
    }
    
    .date-quick-buttons {
        display: flex;
        gap: 6px;
    }
    
    .quick-date-btn {
        padding: 4px 8px;
        font-size: 14px;
        height: 24px;
    }
}
</style>